<div class="typo3-login">
    <div class="typo3-login-inner">
        <div class="typo3-login-container">
            <div class="typo3-login-wrap">
                <div class="panel panel-lg panel-login">
                    <div class="panel-body">
                        <div class="typo3-login-logo">
                            <a href="{loginUrl}" id="t3js-login-url" data-referrer-check-enabled="{f:if(condition: '{referrerCheckEnabled}', then: '1', else: '0')}">
                                <img src="{logo}" class="typo3-login-image" alt="" />
                            </a>
                        </div>
                        <f:if condition="{formType} == 'LoginForm'">
                            <f:then>
                                <f:if condition="{hasLoginError}">
                                    <div class="t3js-login-error" id="t3-login-error">
                                        <div class="alert alert-danger">
                                            <strong><f:translate key="login.error.message" /></strong>
                                            <p><f:translate key="login.error.description" /></p>
                                        </div>
                                    </div>
                                </f:if>
                                <noscript>
                                    <f:be.infobox message="{f:translate(key: 'login.error.javascript')}" state="2" />
                                </noscript>
                                <div class="hidden t3js-login-error-nocookies">
                                    <f:be.infobox message="{f:translate(key: 'login.error.cookies')}" state="2" />
                                </div>
                                <div class="hidden t3js-login-error-noreferrer">
                                    <f:be.infobox message="{f:translate(key: 'login.error.referrer')}" state="2" />
                                </div>
                                <div class="typo3-login-form t3js-login-formfields">
                                    <form action="?loginProvider={loginProviderIdentifier}" method="post" name="loginform" id="typo3-login-form">
                                        <f:form.hidden name="login_status" value="login" />
                                        <f:form.hidden name="userident" id="t3-field-userident" class="t3js-login-userident-field" value="" />
                                        <f:form.hidden name="redirect_url" value="{redirectUrl}" />
                                        <f:form.hidden name="loginRefresh" value="{loginRefresh}" />

                                        <f:render partial="Login/InterfaceSelector" arguments="{_all}" />

                                        <f:render section="loginFormFields" />

                                        <div class="form-group" id="t3-login-submit-section">
                                            <button class="btn btn-block btn-login t3js-login-submit" id="t3-login-submit" type="submit" name="commandLI" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {f:translate(key: 'login.process')}" autocomplete="off">
                                                <f:translate key="login.submit" />
                                            </button>
                                        </div>
                                        <ul class="list-unstyled typo3-login-links">
                                            <f:for each="{loginProviders}" as="provider" key="providerKey">
                                                <f:if condition="{provider.label}">
                                                    <f:if condition="{loginProviderIdentifier} != {providerKey}">
                                                        <li class="t3js-loginprovider-switch" data-providerkey="{providerKey}"><a href="?loginProvider={providerKey}"><i class="fa fa-fw {provider.icon-class}"></i> <span><f:translate key="{provider.label}" /></span></a></li>
                                                    </f:if>
                                                </f:if>
                                            </f:for>
                                        </ul>
                                        <f:if condition="{enablePasswordReset}">
                                            <f:render section="ResetPassword" arguments="{_all}" optional="true" />
                                        </f:if>
                                    </form>
                                </div>
                            </f:then>
                            <f:else if="{enablePasswordReset}">
                                <f:render section="ResetPassword" arguments="{_all}" />
                            </f:else>
                            <f:else>
                                <form action="index.php" method="post" name="loginform">
                                    <input type="hidden" name="login_status" value="logout" />
                                    <div class="t3-login-box-body">
                                        <div class="t3-login-logout-form">
                                            <div class="t3-login-username">
                                                <div class="t3-login-label t3-username">
                                                    <f:translate key="login.username" />
                                                </div>
                                                <div class="t3-username-current">
                                                    {backendUser.username}
                                                </div>
                                            </div>
                                            <f:if condition="{showInterfaceSelector}">
                                                <f:then>
                                                    <div class="t3-login-interface">
                                                        <div class="t3-login-label t3-interface-selector">
                                                            <f:translate key="login.interface" />
                                                        </div>
                                                        <f:form.select name="users" options="{interfaces}" optionValueField="jumpScript" optionLabelField="label" />
                                                    </div>
                                                </f:then>
                                                <f:else>
                                                    <f:if condition="{interface}">
                                                        <f:form.hidden name="interface" value="{interface}" />
                                                    </f:if>
                                                </f:else>
                                            </f:if>
                                            <input type="hidden" name="p_field" value="" />
                                            <input class="btn btn-block btn-lg" type="submit" name="commandLO" value="{f:translate(key: 'login.submit')}" id="t3-login-submit" />
                                        </div>
                                    </div>
                                </form>
                            </f:else>
                        </f:if>
                    </div>
                    <f:render partial="LoginNews" arguments="{_all}" />
                    <div class="panel-footer">
                        <div class="typo3-login-copyright-wrap">
                            <a href="#loginCopyright" class="typo3-login-copyright-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="loginCopyright">
                                <span><f:translate key="login.copyrightLink" /></span>
                                <img src="{images.typo3}" alt="{f:translate(key: 'login.typo3Logo')}" width="70" height="20" />
                            </a>
                            <div id="loginCopyright" class="collapse">
                                <div class="typo3-login-copyright-text">
                                    <p>
                                        <f:format.raw>{copyright}</f:format.raw>
                                    </p>
                                    <ul class="list-unstyled">
                                        <li><a href="https://typo3.org" target="_blank" rel="noreferrer" class="t3-login-link-typo3"><i class="fa fa-external-link"></i> TYPO3.org</a></li>
                                        <li><a href="https://typo3.org/donate/online-donation/" target="_blank" rel="noreferrer" class="t3-login-link-donate"><i class="fa fa-external-link"></i> <f:translate key="login.donate" /></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <f:if condition="{loginFootnote}">
            <div class="typo3-login-footnote">
                <p>{loginFootnote}</p>
            </div>
        </f:if>
    </div>
</div>
